<template>
	<view class="album">
		<view class="empty" v-if="list.length <= 0">
			<img src="@/static/images/empty_data.png" alt="" class="empty-data"  mode="widthFix">
		</view>
		<!-- 中间主体 -->
		<view class="" v-for="(detail,index) in list" :key="index" v-else>
			<view class="album-item">
				<view class="album-item-content u-flex">
					<!-- 左侧图片 -->
					<img :src="detail.image" alt="" class="detail-img" mode="widthFix">
					<!-- 右侧信息 -->
					<view class="album-item-right">
						<view class="name u-line-1">
							{{detail.title}}
						</view>
						<view class="desc u-line-1">
							简介:{{detail.description}}
						</view>
						<view class="photo-num">
							照片:{{detail.images.length}}
						</view>
						<view class="photo-num">
							创建时间:{{detail.createtime}}
						</view>
					</view>
				</view>
				<!-- 右上角 -->
				<view class="edit-options">
					<u-icon name="more-dot-fill" color="#666666" size="38" @click="showOptions(detail)"></u-icon>
					<view class="options-list" v-show="id == detail.id && show1">
						<view class="options-list-item" @click="del(detail)">
							<u-icon name="trash" color="#666666" size="22" style="margin-right: 5rpx;"></u-icon>删除
						</view>
					</view>
				</view>
				<!-- 底部操作 -->
				<view class="options">
					<button class="see" @click="toSee(detail.id)">查看</button>
				</view>
			</view>
		</view>
		<u-mask :show="show1" @click="show1 = false" :custom-style="{background: 'rgba(0, 0, 0, 0.0)'}"></u-mask>
		<view class="album-add" @click="addAlbum">
			<u-icon name="plus" color="#fff" size="48"></u-icon>
		</view>
		
		<!-- 创新相册弹窗 -->
		<u-popup v-model="show" mode="center" border-radius="16">
			<view class="album-add-popup">
				<u-form :model="form" ref="uForm" label-position="top" :label-style="{'color':'#333333','font-weight':'600'}">
					<u-form-item label="相册姓名" prop="name"><u-input v-model="form.name" /></u-form-item>
					<u-form-item label="相册简介" prop="intro"><u-input v-model="form.intro" /></u-form-item>
				</u-form>
				<button @click="submit" class="album-add-submit">创建相册</button>
			</view>
		</u-popup>
		
		<shopro-auth-modal v-if="authType"></shopro-auth-modal>
	</view>
</template>

<script>
	import http from '@/pages/request/index'
	import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
	export default {
		data() {
			return {
				id:'',
				list:[],
				show:false,
				show1:false,
				form:{
					name:'',
					intro:''
				},
				rules: {
					name: [
						{ 
							required: true, 
							message: '请输入姓名', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					intro: [
						{
							max: 15, 
							message: '简介最多15个字', 
							trigger: 'change'
						}
					]
				}
			};
		},
		computed: {
			...mapGetters(['authType'])
		},
		onLoad() {
		},
		onShow(){
			this.albumCatalog()
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			albumCatalog(){
				http('album.catalog',{}).then(res=>{
					console.log(res);
					this.list = res.data
				})
			},
			addAlbum(){
				this.show = true
				this.form = {
					title:'',
					author:''
				}
				this.$refs.uForm.setRules(this.rules);
			},
			submit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						http('album.add',{
							title:this.form.name,
							description:this.form.intro
						}).then(res=>{
							console.log(res);
							this.show = false
							this.toSee(res.data.id)
						})
					} else {
						console.log('验证失败');
					}
				});
				
			},
			toSee(id){
				uni.navigateTo({
					url: `/pages/album/albumDetail?id=` + id
				});
			},
			showOptions(item){
				this.show1 = true
				this.id = item.id
			},
			del(detail){
				if(detail.is_default == '1'){
					uni.showToast({
						title: '系统相册无法删除',
						duration: 2000,
						icon:'none'
					});
					return
				}
				http('album.del',{
					id:this.id
				},'删除中').then(res=>{
					uni.showToast({
						title: '删除成功',
						duration: 2000
					});
					console.log(res);
					this.show1 = false
					this.albumCatalog()
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	
	.album {
		padding: 20rpx 24rpx;
		height: 100vh;
		overflow: scroll;
		.empty {
			width: 100%;
			text-align: center;
		}
		
		.album-item {
			position: relative;
			width: 100%;
			background: #FFFFFF;
			border-radius: 8px 8px 8px 8px;
			padding: 24rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			margin-bottom: 20rpx;
			.album-item-content {
				font-size: 24rpx;
				color: #999999;
				vertical-align: middle;
				.detail-img {
					width: 200rpx;
					height: 200rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin: 0;
					padding: 0;
				}
				.detail-img-small {
					width: 176rpx;
					height: 176rpx;
				}
				.album-item-right {
					width: calc(100% - 220rpx);
					height: 200rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 20rpx;
					.name {
						width: 100%;
						margin-top: 10rpx;
						font-weight: bold;
						color: #42494F;
						font-size: 32rpx;
						padding-right: 65rpx;
					}
				}
				.album-item-right-small {
					height: 176rpx;
					width: calc(100% - 176rpx);
				}
			}
			.edit-options {
				position: absolute;
				top: 35rpx;
				right: 24rpx;
			}
			.options {
				margin-top: 30rpx;
				height: 70rpx;
				padding-bottom: 6rpx;
				width: 100%;
			}
			.options-list {
				position: absolute; background: #FFFFFF;
				bottom: -12rpx;
				right: 0;
				transform: translateY(100%);
				box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0,0,0,0.25);
				border-radius: 10rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				z-index:100000;
				
				.options-list-item {
					line-height: 44rpx;
					text-align: center;
					white-space: nowrap;
					padding: 10rpx 20rpx;
					padding-right: 40rpx;
				}
			}
			.options-list::after {
			    position: absolute;
			    top: -12rpx;
			    right: 8rpx;
			    content: '';
			    border-left: 14rpx solid transparent;
			    border-right: 14rpx solid transparent;
			    border-bottom: 14rpx solid #fff;
			    filter: drop-shadow(0rpx -6rpx 4rpx rgba(0,0,0,0.25));
			}
		}
		.see {
			float: right;
			width: 160rpx;
			height: 64rpx;
			background: #00C3C5;
			border-radius: 108rpx 108rpx 108rpx 108rpx;
			// border: 1rpx solid #00C3C5;
			border: none;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #FFFFFF;
			font-size: 28rpx;
			font-weight: 500;
			margin: 0;
		}
		.album-add {
			position: absolute;
			bottom: 200rpx;
			right: 20rpx;
			width: 88rpx;
			height: 88rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #00C3C5;
			border-radius: 50%;
		}
		.album-add-popup {
			width: 90vw;
			padding: 42rpx;
			.album-add-submit {
				width: 414rpx;
				height: 88rpx;
				background: #00C3C5;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				color: #FFFFFF;
				font-size: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 40rpx;
			}
		}
	}
</style>